<!--
 * 岗位管理--新增编辑岗位
 * @author: hexiaozhen
 * @since: 2023-09-27
 * addEditPost.vue
-->
<template>
  <a-modal
    v-model:visible="visibleModal"
    :title="rowData.type === 'add' ? '新增岗位' : '编辑岗位'"
    title-align="start"
    width="600px"
    :mask-closable="false"
    @cancel="handleCancel"
    draggable
  >
    <TableForm
      ref="formAndTableRef"
      :rules="rules"
      :showMore="false"
      :rowspan="24"
      :formItems="formItems"
      :formData="formData"
      class="tableForm"
      @formChange="formChange"
    ></TableForm>
    <template #footer>
      <footer>
        <a-button @click="handleCancel">取消</a-button>
        <a-button type="primary" @click="handleOk">确定</a-button>
      </footer>
    </template>
  </a-modal>
</template>

<script setup>
import { reactive, ref, onMounted, toRefs } from 'vue'
import TableForm from '@/components/tableForm/index.vue'
import system from '@/api/modules/system'
import { Message } from '@arco-design/web-vue'

const props = defineProps({
  // 表单json配置项
  visible: {
    type: Boolean,
    default: false,
  },
  rowData: {
    type: Object,
    default: () => {
      return {
        type: '',
      }
    },
  },
})
const { visible, rowData } = toRefs(props)
const emit = defineEmits(['update:visible', 'submit'])
let visibleModal = ref(false) // 弹窗显示与隐藏
visibleModal.value = visible.value
const formAndTableRef = ref() // 表单
// 确定
const handleOk = () => {
  formAndTableRef.value.$refs.form.validate((valid) => {
    if (!valid) {
      const api = rowData.value.type === 'add' ? 'addPost' : 'editPost'

      let param = {
        postName: formData.value.postName,
        deptId: formData.value.deptId,
        postDesc: formData.value.postDesc,
        postCode: formData.value.postCode,
        remark: formData.value.remark,
        userList: JSON.parse(JSON.stringify(formData.value.userList)),
        postId: formData.value.postId,
      }
      param.userList = param.userList.map((it) => {
        delete it.nickName
        return it
      })
      system[api](param).then((res) => {
        visibleModal.value = false
        Message.success(res.msg)
        emit('submit')
        emit('update:visible', false)
      })
    }
  })
}
// 取消
const handleCancel = () => {
  visibleModal.value = false
  emit('update:visible', false)
}

// 获取字典数据
const options = ref([])
const userOptions = ref([])

// 表单配置
const formItems = reactive([
  { name: 'postName', label: '岗位名称', type: 'a-input' },
  {
    name: 'deptId',
    label: '部门',
    type: 'a-tree-select',
    data: options,
    noClear: true,
    fieldNames: {
      key: 'deptId',
      title: 'deptName',
      children: 'children',
    },
  },
  { name: 'postCode', label: '岗位编号', type: 'a-input' },
  { name: 'postDesc', label: '岗位描述', type: 'a-textarea' },
  {
    name: 'userList',
    label: '分配人员',
    type: 'a-select',
    valueKey: 'userName',
    fieldNames: { value: 'userName', label: 'nickName' },
    options: userOptions,
    multiple: true,
  },
  { name: 'remark', label: '备注', type: 'a-textarea' },
])
let formData = ref({ postName: '', deptId: '', postDesc: '', postCode: '', remark: '', userList: [] })
const detailPost = (val) => {
  system.detailPost(val).then((res) => {
    formData.value = res.data
  })
}
if (rowData.value.type === 'edit') {
  detailPost(rowData.value.postId)
} else {
  formData.value.postCode = 'post' + new Date().getTime()
  formData.value.deptId = rowData.value.deptId
}
const rules = reactive({
  postName: [{ required: true, message: '岗位名称不能为空', trigger: 'blur' }],
  postCode: [{ required: true, message: '岗位编号不能为空', trigger: 'blur' }],
})

// 部门联动分配人员下拉
const formChange = (prop, val) => {
  // 部门筛选直接掉列表接口
  if (prop === 'deptId') {
    getUserByDept(val)
    formData.value.userList = []
  }
}
// 分配人员下拉列表
const getUserByDept = (val = rowData.value.deptId) => {
  system.getUserByDept(val).then((res) => {
    userOptions.value = res.data.map((item) => {
      return { nickName: item.nickName, userName: item.userName, userId: item.userId }
    })
  })
}
// 数据字典 -- 部门下拉
const getOption = () => {
  system.getDeptList({ deptId: rowData.value.deptId }).then((res) => {
    options.value = res.data
  })
}

onMounted(() => {
  getOption()
  getUserByDept()
})
</script>
